<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-23 15:18:56
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-23 20:51:30
 * @FilePath: \后端管理系统\app\src\components\Search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" v-if="isSearch">
        <el-input
          placeholder="请输入内容"
          clearable
          @clear="clearSearch"
          v-model="userObj.query"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <!-- 插槽 -->
        <slot></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    userObj: {
      type: Object,
      default: () => {
        return {
          query: "",
          pagenum: 1,
          pagesize: 5,
        };
      },
    },
    isSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    addUser() {
      this.$emit("add-user");
    },
    search() {
      // 自定义事件
      this.$emit("init-search");
    },
    clearSearch() {
      // 自定义事件
      this.$emit("init-search");
    },
  },
};
</script>